import { Button, Card, Space } from "antd";
import styles from "./topList.module.less";
import {
  BookOutlined,
  CommentOutlined,
  PieChartOutlined,
  UserOutlined,
} from "@ant-design/icons";

interface ICardItem {
  title: string;
  count: number | string;
  icon: JSX.Element;
}

function TopList() {
  const CardItem: ICardItem[] = [
    {
      title: "访问量",
      count: 100,
      icon: <PieChartOutlined style={{ color: "#eb2f96" }} />,
    },
    {
      title: "用户量",
      count: 100,
      icon: <UserOutlined style={{ color: "#eb2f96" }} />,
    },
    {
      title: "文章量",
      count: 100,
      icon: <BookOutlined style={{ color: "#eb2f96" }} />,
    },
    {
      title: "留言评论量",
      count: 100,
      icon: <CommentOutlined style={{ color: "#eb2f96" }} />,
    },
  ];
  return (
    <div>
      <Space size={[85, 50]} wrap>
        {CardItem.map((item: ICardItem, index: number) => (
          <Card className={styles.card} key={index}>
            <div className={styles.cardMain}>
              {/*  右边 */}
              <div className={styles.icon}>{item.icon}</div>
              {/* 左边 */}
              <div>
                <div className={styles.title}>{item.title}</div>
                <div className={styles.count}>{item.count}</div>
              </div>
            </div>

            {/* <div className={styles.title}>{item.title}</div>
            <div className={styles.count}>{item.count}</div>
            <div className={styles.icon}>{item.icon}</div> */}
          </Card>
        ))}
        {/* {new Array(4).fill(null).map((_, index) => (
          // eslint-disable-next-line react/no-array-index-key
          <Card className={styles.card} key={index}>
            Button
          </Card>
        ))} */}
      </Space>
    </div>
  );
}

export default TopList;
